<template>
  <van-row class="custom-block" :gutter="gutter">
    <van-col
      v-for="widget in visibleWidgetList"
      :key="widget.widgetId"
      :class="subWidgetClass"
      :span="widget.props.span || 24"
      :style="{'padding-bottom': (widget.props.paddingBottom ? widget.props.paddingBottom : 0) + 'px'}"
    >
      <OnlineCustomWidget
        :widget="widget"
        :value="getWidgetValue(widget)"
        @input="(val) => onWidgetValueChange(widget, val)"
        @change="(val, detail) => onChange(widget, val, detail)"
      />
    </van-col>
  </van-row>
</template>

<script>
import OnlineCustomWidget from './OnlineCustomWidget.vue';

export default {
  name: 'onlineCustomBlock',
  props: {
    gutter: {
      type: Number,
      default: 0
    },
    widgetList: {
      type: Array,
      default: () => []
    },
    subWidgetClass: {
      type: String
    },
    operation: {
      type: Object
    }
  },
  components: {
    OnlineCustomWidget
  },
  inject: ['form'],
  methods: {
    getWidgetValue (widget) {
      if (this.operation && typeof this.operation.getWidgetValue === 'function') {
        return this.operation.getWidgetValue(widget);
      } else {
        return this.form().getWidgetValue(widget);
      }
    },
    onWidgetValueChange (widget, val) {
      this.form().onValueChange(widget, val);
    },
    onChange (widget, val, detail) {
      if (this.operation && typeof this.operation.onWidgetValueChange === 'function') {
        return this.operation.onWidgetValueChange(widget, val, detail);
      } else {
        return this.form().onWidgetValueChange(widget, val, detail);
      }
    }
  },
  computed: {
    visibleWidgetList () {
      return this.widgetList.filter(widget => this.form().getWidgetVisible(widget));
    }
  }
}
</script>

<style scoped>
  .custom-block /deep/ .van-cell {
    border-bottom: 1px solid #F7F8FA;
  }
</style>
